<script setup>
import { ref, onMounted, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import {
  getItemCommodityEvaluates,
  deleteItemEvaluates,
} from "@/server/api/Confirm";
import { useUseStore } from "@/stores/user";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const use = useUseStore();
const route = useRoute();

const commodityDetail = ref({}); // 商品数据详情
const CommentCount = ref(0); // 评论数量
const CommentList = ref([]); // 商品评论列表

// 分页加载控制
const loading = ref(false); // 加载状态
const finished = ref(false); // 是否加载完成
const page = ref(1); // 当前页码
const pageSize = ref(10); // 每页评论数量

// 删除评论
const Delete = (evaluateId) => {
  console.log(evaluateId);
  console.log(use.userId);
  deleteItemEvaluates(evaluateId, use.userId).then((res) => {
    if (res.data.code == 200) {
      CommentList.value = [];
      page.value = 1;
      finished.value = false;
      loadComments();
    }
  });
};

// 加载评论
const loadComments = () => {
  if (finished.value) return;

  loading.value = true;
  getItemCommodityEvaluates(commodityDetail.value.commodityId, page.value, pageSize.value).then((res) => {
    const { data } = res.data;
    if (data.data.length < pageSize.value) {
      finished.value = true; // 如果返回的数据小于每页条数，说明没有更多了
    }

    CommentList.value.push(...data.data);
    CommentCount.value = data.count;
    page.value += 1; // 下一页
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};

onBeforeMount(() => {
  commodityDetail.value = JSON.parse(route.query.commodityDetail);
});

onMounted(() => {
  loadComments();
});
</script>

<template>
  <div class="contain">
    <!-- 导航栏 -->
    <div class="nav">
      <div class="left" @click="$router.back()">
        <img src="/images/cart/back.png" />
      </div>
      <div class="title">
        {{ $t("item.details.comment") }}
      </div>
    </div>

    <!-- 头部商品信息 -->
    <div class="CommodityInfo">
      <img :src="commodityDetail.imagsList[0]" alt="" />
      <div class="box">
        <span class="title ellipsis">{{ commodityDetail.commodityName }}</span>
        <span class="walk">{{ commodityDetail.details }}</span>
        <span class="price">
          eCNY<span>{{ commodityDetail.price }}</span>
        </span>
      </div>
    </div>

    <!-- 全部评论 -->
    <div class="commentBox">
      <div class="allComment">
        {{ $t("item.details.comment") }}
        <span>({{ CommentCount > 99 ? "99+" : CommentCount }})</span>
      </div>

      <!-- 评论列表 (使用 van-list 实现) -->
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadComments">
        <div class="commentItem" v-for="item in CommentList" :key="item.evaluateId">
          <div class="top">
            <img :src="item.userImage || `/images/Home/pipayshop_home.png`" alt="" />
            <div class="right">
              <div class="nickName">
                {{ item.userName }}
                <van-rate class="rate" size="15" v-model="item.score" color="rgb(255, 210, 30)" readonly />
              </div>
              <div class="time">{{ item.createTime }}</div>
            </div>
          </div>
          <div class="commentContent">
            <p>{{ item.evaluate }}</p>
          </div>
          <div class="delete" v-if="item.userId == use.userId" @click.stop="Delete(item.evaluateId)">
            ⅹ
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>


<style lang="scss" scoped>
// 容器
.contain {
  background-color: rgba(255, 255, 255, 1);
  font-family: "PingFang SC";
}

// 导航栏
.nav {
  padding: 20rem 16rem;
  display: flex;
  align-items: center;

  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;

  background-color: rgba(255, 255, 255, 1);

  .left {
    width: 24rem;
    height: 24rem;
    line-height: 24rem;
    text-align: center;

    img {
      width: 6rem;
      height: 12rem;
    }
  }

  .title {
    height: 28rem;
    margin-left: 117rem;
    font-size: 16rem;
    font-weight: 500;
    line-height: 28rem;
    text-align: center;
    color: rgba(102, 102, 102, 1);
  }
}

// 商品信息
.CommodityInfo {
  margin-top: 70rem;
  background: rgba(245, 245, 245, 1);
  display: flex;
  align-items: center;

  img {
    width: 64rem;
    height: 74rem;
    border-radius: 8rem;
    margin: 12rem 12rem 12rem 24rem;
  }

  .box {
    width: 290rem;
    height: 74rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    .title {
      width: 258rem;
      height: 22rem;
      font-size: 16rem;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }

    .walk {
      font-size: 13rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }

    .price {
      font-size: 14rem;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);

      span {
        font-size: 14rem;
        font-weight: 500;
        color: rgba(100, 46, 142, 1);
        margin-left: 4rem;
      }
    }

    .sale {
      position: absolute;
      right: 24rem;
      bottom: 0;
      font-size: 12rem;
      font-weight: 400;
      color: rgba(204, 204, 204, 1);
    }
  }
}

// 占位
.Placeholder2 {
  height: 98rem;
}

// 全部评论
.commentBox {
  width: 358rem;
  margin-left: 16rem;
  // min-height: calc(100vh - 202rem);
  padding-bottom: 50rem;

  .allComment {
    font-size: 16rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-top: 16rem;
    padding-bottom: 16rem;

    span {
      font-size: 14rem;
      margin-left: 4rem;
    }
  }

  .commentItem {
    width: 100%;
    margin-top: 10rem;
    position: relative;

    .top {
      height: 40rem;
      width: 100%;
      display: flex;

      img {
        width: 40rem;
        height: 40rem;
        border-radius: 50%;
        object-fit: cover;
      }

      .right {
        margin-left: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .nickName {
          font-size: 15rem;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);

          .rate {
            margin-left: 5rem;
          }
        }

        .time {
          font-size: 13rem;
          font-weight: 400;
          color: rgba(204, 204, 204, 1);
        }
      }
    }

    .commentContent {
      width: 100%;
      // min-height: 92rem;
      // max-height: 128rem;
      margin-top: 14rem;
      border-bottom: 1rem solid rgba(230, 230, 230, 1);
      padding-bottom: 14rem;

      p {
        width: 100%;
        min-height: 40rem;
        max-height: 156rem;
        font-size: 15rem;
        font-weight: 500;
        line-height: 20rem;
        color: rgba(51, 51, 51, 1);
        // 超出隐藏
        word-break: keep-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        overflow: hidden;
        box-sizing: content-box;
        text-align: justify;
        word-wrap: break-word;
      }
    }

    .delete {
      position: absolute;
      top: 8rem;
      right: 12rem;
      width: 18rem;
      height: 18rem;
      border-radius: 50%;
      border: 1rem solid rgba(100, 46, 142, 1);
      line-height: 16rem;
      text-align: center;
      font-size: 14rem;
    }
  }
}
</style>
